<template>
	<view class="rich-toast" v-if="show">
		<view class="toast-content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			content: {
				type: Array, // rich-text需要数组格式的节点
				default: () => []
			},
			duration: {
				type: Number,
				default: 2000
			}
		},
		watch: {
			show(newVal) {
				if (newVal) {
					// 自动关闭
					setTimeout(() => {
						this.$emit('close')
					}, this.duration)
				}
			}
		}
	}
</script>

<style scoped>
	.rich-toast {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.3);
		z-index: 9999;
	}

	.toast-content {
		max-width: 70%;
		padding: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		text-align: center;
	}
</style>